import {designPage, reactive} from "plain-design-composition";
import data from '../../../data/data-1.json';
import {deepcopy} from "plain-utils/object/deepcopy";
import {DemoRow} from "../../Demo/DemoRow";
import {Adc, AdcExpand, AdcGroup, AdcIndex, AntdTable, ColorPicker, DatePicker, Form, FormItem, iAdtRowRenderScope, Input, InputNumber} from "../../../../packages";

export const demoExpand = designPage(() => {

  const state = reactive({
    data,
  });

  const summaryData = deepcopy(data.slice(0, 2));

  const expand = ({ row }: iAdtRowRenderScope) => {
    return (
      <div style={{ padding: '12px' }}>
        <Form column={1} disabled key={row.id}>
          <FormItem label={'普通文本'}>{row.name}</FormItem>
          <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
          <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
          <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
          <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
        </Form>
      </div>
    );
  };

  return () => (
    <DemoRow title={'展开行'}>
      <AntdTable
        dataSource={state.data}
        summaryDataSource={summaryData}
        virtual
        showRows={10}
      >
        <AdcIndex/>
        <AdcExpand
          fixedWidth
          expand={expand}
        />
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'大小'} dataIndex={'size'}/>
        <AdcGroup title={'地址'} fixed={'left'}>
          <Adc dataIndex="date" title="日期"/>
          <Adc dataIndex="color" title="颜色"/>
        </AdcGroup>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc title={'名称'} dataIndex={'name'} fixed="right"/>
        <AdcGroup title={'站点'} fixed={'right'}>
          <Adc dataIndex={'url'} title={'链接'}/>
          <Adc dataIndex={'domain'} title={'域名'}/>
        </AdcGroup>

        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
      </AntdTable>
    </DemoRow>
  );
});


export const demoExpandVirtualCOlumn = designPage(() => {

  const state = reactive({
    data,
  });

  const summaryData = deepcopy(data.slice(0, 2));

  const expand = ({ row }: iAdtRowRenderScope) => {
    return (
      <div style={{ padding: '12px' }}>
        <Form column={1} disabled key={row.id}>
          <FormItem label={'普通文本'}>{row.name}</FormItem>
          <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
          <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
          <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
          <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
        </Form>
      </div>
    );
  };

  return () => (
    <DemoRow title={'虚拟列'}>
      <AntdTable
        dataSource={state.data}
        summaryDataSource={summaryData}
        virtual
        showRows={10}
        virtualColumn
      >
        <AdcIndex/>
        <AdcExpand
          toggleOnClickRow
          fixedWidth
          expand={expand}
        />
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'大小'} dataIndex={'size'}/>
        <AdcGroup title={'地址'} fixed={'left'}>
          <Adc dataIndex="date" title="日期"/>
          <Adc dataIndex="color" title="颜色"/>
        </AdcGroup>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc title={'名称'} dataIndex={'name'} fixed="right"/>
        <AdcGroup title={'站点'} fixed={'right'}>
          <Adc dataIndex={'url'} title={'链接'}/>
          <Adc dataIndex={'domain'} title={'域名'}/>
        </AdcGroup>

        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>

        <Adc dataIndex={'url'} title={'链接'}/>
        <Adc dataIndex={'domain'} title={'域名'}/>
        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc dataIndex={'url'} title={'链接'}/>
        <Adc dataIndex={'domain'} title={'域名'}/>
        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc dataIndex={'url'} title={'链接'}/>
        <Adc dataIndex={'domain'} title={'域名'}/>
        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc dataIndex={'url'} title={'链接'}/>
        <Adc dataIndex={'domain'} title={'域名'}/>
        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc dataIndex={'url'} title={'链接'}/>
        <Adc dataIndex={'domain'} title={'域名'}/>
        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>

        <Adc dataIndex={'url'} title={'链接'}/>
        <Adc dataIndex={'domain'} title={'域名'}/>
        <Adc title="协议" dataIndex="protocol"/>
        <Adc title="邮箱" dataIndex="email"/>
        <Adc title="ip" dataIndex="ip"/>
        <Adc title={'编号'} dataIndex={'id'}/>
        <Adc title={'评分'} dataIndex={'star'}/>
        <Adc title={'地址'} dataIndex={'addr'}/>
      </AntdTable>
    </DemoRow>
  );
});
